<template>
  <div
    class="ui-file-portray"
    :class="['ui-file-portray--' + dir, 'ui-file-portray--' + size, { 'is-link': $listeners.click }]"
    @click="handleClick"
  >
    <span class="ui-file-portray__icon">
      <ui-file-icon
        :name="name"
        :type="type"
        :size="size"
      ></ui-file-icon>
    </span>
    <span class="ui-file-portray__label">{{ label }}</span>
  </div>
</template>
<script>
import FileIcon from '../file-icon'

export default {
  name: 'UiFilePortray',
  components: {
    UiFileIcon: FileIcon
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String
    },
    size: {
      type: String,
      default: 'small'
    },
    label: {
      type: String,
      default: ''
    },
    dir: {
      type: String,
      default: 'horizon',
      validator(value) {
        return ['vertical', 'horizon'].includes(value)
      }
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less">
.ui-file-portray{
  line-height: 1.5em;
  word-break: break-all;
  &.is-link{
    cursor: pointer;
  }
}
.ui-file-portray__icon{
  display: inline-block;
  line-height: 0;
  vertical-align: top;
}
.ui-file-portray--vertical{
  display: flex;
  flex-direction: column;
  align-items: center;
  &.ui-file-portray--large{
    .ui-file-portray__label {
      margin-top: 18px;
    }
  }
  &.ui-file-portray--small{
    .ui-file-portray__label {
      margin-top: 3px;
    }
  }
}
.ui-file-portray--horizon{
  display: flex;
  flex-direction: row;
  align-items: center;
  &.ui-file-portray--large{
    .ui-file-portray__label {
      margin-left: 24px;
    }
  }
  &.ui-file-portray--small{
    .ui-file-portray__label {
      margin-left: 12px;
    }
  }
}
.ui-file-portray--large{
  .ui-file-portray__label {
    font-size: 18px;
  }
}
</style>
